<!-- 筛选组件1 -->
<template>
  <!-- 最大盒子 -->
  <div class="main-box">
    <!-- 搜索的开始 -->
    <div class="search-name">
      <div class="search-name-top">
        <div>
          <img src="../assets/shaixuan.png" alt />
        </div>
        <div>
          <span>筛选</span>
        </div>
      </div>
      <!-- 第二层信息 -->
      <div class="search-name-bottom">
        <div class="search-content-left">
          <span>角色<i class='asterisk'>*</i>：</span>
         <template>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
            </el-select>
            </template>
        </div>
         <!-- 搜索 -->
            <div class="search-content-left">
                <span>输入搜索：</span>
                <slot>
                    <el-input placeholder="输入轮播图的标题......" v-model="inpVal" clearable class='search-inp'></el-input>
                </slot>
            </div>
      </div>
      <!-- 筛选按钮 -->
       <div class="search-content-right">
           <span class='yg-title'>员工状态：</span>
           <div class='check-box'>
            <!-- 复选框 -->
            <template>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="启用"></el-checkbox>
                        <el-checkbox label="停用"></el-checkbox>
                    </el-checkbox-group>
                </template>
            </div>
          <el-button>
            <img src="../assets/btnBG.png" alt />
            <span>筛选</span>
          </el-button>
          <p>清空筛选条件</p>
        </div>

    </div>
  </div>
</template>

<script>
import cnp from "../components/biaoti";
export default {
  data() {
    return {
        inpVal: "",
         options: [{
          value: '选项1',
          label: '管理员'
        }, {
          value: '选项2',
          label: '客服'
        }],
        value: '',
         checkList: ['',' '],
    };
  },
  name: "Star",
  components: {
    cnp,
  },
};
</script>
<style  scoped>
.search-name {
  height: 130px;
  padding-left: 25px;
  padding-top: 16px;
}
.search-name-top {
  display: flex;
}
.search-name-top img {
  width: 16px;
  height: 16px;
  display: block;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
.search-content-left{
    margin-right:90px;
}
.search-inp:focus{
    border:1px solid #9137f3;
}
.el-input__inner:focus {
    border-color: #9137f3;
    outline: 0;
}
.yg-title{
    line-height:40px;
}
.check-box{
    padding-top:12px;
    margin-right:160px;
}
.search-name-top span {
  font-size: 14px;
  color: #999;
  position: relative;
  left: 4px;
  top: -3px;
}
.search-name-bottom {
    padding-left:22px;
    display: flex;
    margin-top: 18px;
    margin-bottom:26px;
}
.asterisk{
    font-style: normal;
    color:red;
}
.search-name-bottom span {
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
.search-content-left .el-input {
  width: 185px;
  height: 40px;
  color: #fff;
  font-size: 13px;
  padding: 0;
}
.search-content-con {
  width: 441px;
  height: 40px;
  line-height: 40px;
  display: flex;
}
.search-content-con .el-date-picker {
  width: 103px;
  height: 40px;
  margin: 0 5px;
}
.search-content-right {
  padding-top: 4px;
  height: 40px;
  display: flex;
}
.search-content-right p {
  font-size: 12px;
  color: #9137f3;
  line-height: 40px;
  margin-left: 26px;
}
.search-content-right .el-button {
  width: 98px;
  height: 36px;
  background: #9137f3;
  position: relative;
}
.search-content-right .el-button img {
  position: absolute;
  left: 22px;
  top: 11px;
}
.search-content-right .el-button span {
  font-size: 13px;
  color: #fff;
  margin-left: 20px;
}
.search-content {
  width: 1110px;
  margin: 20px 0 0 20px;
  min-height: 600px;
  background-color: #ccc;
  border: 1px solid rgb(228, 228, 228);
}
</style>